<template>
  <div class="relative inline-block">
    <!-- 使用远程图片作为消息图标 -->
    <u-image :src="messageIconUrl" alt="消息图标" :height="60" :width="60" />
    <!-- 未读徽章 -->
    <view
      v-if="unreadCount > 0"
      class="absolute top-0 right-0 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center px-1 transform translate-x-1 -translate-y-1"
    >
      {{ unreadText }}
    </view>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';

const props = defineProps({
  unreadCount: {
    type: Number,
    default: 0,
  },
})

// 显示内容，超过99则显示99+
const unreadText = computed(() => {
  return props.unreadCount > 99 ? '99+' : props.unreadCount.toString()
})

// 消息图标路径
const messageIconUrl = 'https://zthd.yuhecloud.com/static/image/iminapp/wx-app/images/workbench/message.png'
</script>